<template id="page">
    <div class="">
        <div v-html="me + '1111'"></div>
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">菜鸟教程</div>
        {{message | capitalize}}
        <template v-if="ok">
            <h1>菜鸟教程</h1>
            <p>学的不仅是技术，更是梦想！</p>
            <p>哈哈哈，打字辛苦啊！！！</p>
        </template>
        <div v-if="Math.random() > 0.5">
            Sorry
        </div>
        <div v-else>
            Not sorry
        </div>
        <div id="app">
            {{ message.split('').reverse().join('') }}
        </div>
        <p style = "font-size:25px;">计数器: {{ counter }}</p>
        <button @click = "counter++" style = "font-size:25px;">点我</button>
    </div>
</template>

<script type="text/ecmascript-6">
    import {Vue} from "vue";

    export default {
        data() {
            return {
                me: 'me',
                ok: true,
                message: 'RUNOOB',
                id : 1,
                ok: false,
                counter: 1
            }
        },
        methods: {

        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    }
</script>

<style>

</style>